<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <!-- $ 是Vue所有的属性都会以$开头 -->
    <div>原始方式: {{ $store.state.count  }}</div>
    <div>计算属性： {{ count }}</div>
    <div>辅助函数： {{ count }}</div>
    <div>筛选数组：{{ $store.getters.filterList }}</div>
    <div>辅助函数 Getters {{ filterList }}</div>
    <!-- <ChildA /> -->
    <child-a />
    <child-b />
  </div>
</template>

<script>
// var  a = { a: 1,b:2 }
// var b = {  ...a }
// mapState(['count'])  等价于  {  count() { return this.$store.state.count  } }
 
// import HelloWorld from './components/HelloWorld.vue'
import ChildA from './components/child-a'
import ChildB from './components/child-b'

import { mapState, mapGetters } from 'vuex'
export default {
  name: 'App',
  components: {
    ChildA, ChildB
    // HelloWorld
  },
  // 计算属性
  computed: {
    ...mapState(['count']),
    ...mapGetters(['filterList'])
    // 懒人写法
    //  count() {
    //    return this.$store.state.count
    //  }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
